<template>
    <a-form-model labelAlign="left"  :model="form" :rules="rules"  :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="16">
            <a-col :span="16">
                <a-form-model-item label="标题"  prop="title" ref="title">
                    <a-input v-model="form.title" placeholder="请输入标题" allowClear @blur="()=>{$refs.title.onFieldBlur();}"  />
                </a-form-model-item>
            </a-col>
            <a-col :span="8">
                <a-form-model-item label="作者"  prop="author" ref="author">
                    <a-input v-model="form.author" placeholder="请输入作者" allowClear @blur="()=>{$refs.author.onFieldBlur();}"  />
                </a-form-model-item>
            </a-col>
            <a-col :span="16" class="sameHeight" >
                <a-form-model-item label="摘要" prop="digest" ref="digest">
                    <a-textarea :rows="5" v-model="form.digest" placeholder="请输入摘要" allowClear
                                @blur="()=>{$refs.digest.onFieldBlur();}"
                    />
                </a-form-model-item>
            </a-col>
            <a-col :span="8" class="sameHeight">
                <a-form-model-item label="封面设置"  prop="thumbMediaId" ref="thumbMediaId">
                    <a-row type="flex" justify="space-around" align="middle">
                        <a-col :span="14">
                            <a-upload
                                    name="file"
                                    list-type="picture-card"
                                    :show-upload-list="false"
                                    :before-upload="beforeUpload"
                                    @change="uploadHandler"
                                    :customRequest="customRequest"
                            >
                                <img v-if="form.thumbUrl" :src="form.thumbUrl" class="PreviewImg"/>
                                <div v-else>
                                    <a-icon :type="upLoading ? 'loading' : 'plus'"/>
                                    <div class="ant-upload-text">本地上传</div>
                                </div>
                            </a-upload>
                        </a-col>
                        <a-col :span="10">
                            <a-button @click="showSelector=true" size="small">素材库内选择</a-button>
                            <a-switch checked-children="正文可见" un-checked-children="正文隐藏"
                                      @change="form.showCoverPic=!form.showCoverPic"
                                      :checked="boolen(form.showCoverPic)"/>
                        </a-col>
                    </a-row>
                </a-form-model-item>
            </a-col>
            <a-col :span="24" style="margin-bottom: 12px; height: 400px">
                <a-form-model-item label="图文正文"  prop="content" ref="content">


                    <RichEditor    :key="dataIndex"
                                   :content="form.content"
                                   :uploadType="'wx'"
                                   :height="300"
                                   @editorHandler="(e)=>{form.content=e}" />




                </a-form-model-item>
            </a-col>
            <a-col :span="16">
                <a-form-model-item label="原文地址" prop="contentSourceUrl" ref="contentSourceUrl">
                    <a-input v-model="form.contentSourceUrl" allowClear
                             @blur=" () => { $refs.contentSourceUrl.onFieldBlur(); } "/>
                </a-form-model-item>
            </a-col>
            <a-col :span="4">
                <a-form-model-item label="是否打开评论">
                    <a-switch :checked="boolen(form.needOpenComment)"
                              @change="form.needOpenComment=!form.needOpenComment"
                              checked-children="打开评论" un-checked-children="关闭评论"/>
                </a-form-model-item>
            </a-col>
            <a-col :span="4">
                <a-form-model-item label="是否粉丝才可评论">
                    <a-switch :checked="boolen(form.onlyFansCanComment)"
                              @change="form.onlyFansCanComment=!form.onlyFansCanComment"
                              checked-children="开启限制" un-checked-children="关闭限制"/>
                </a-form-model-item>
            </a-col>
        </a-row>
        <ImageSelector v-if="showSelector" @closeModal="handlerCloseModal"/>
    </a-form-model>
</template>
<script>
    import {addFileMaterial} from "../../../public/http";
    import {formRule} from './validator'
    export default {
        props: ['dataList', 'dataIndex'],
        components: {

            RichEditor: () => import('../../../../../../common/RichEditor'),
            ImageSelector: () => import('../../../component/material/ImageSelector')
        },
        data() {
            return {
                showSelector: false,
                upLoading: false,
                loading: false,
                labelCol: {span: 24},
                wrapperCol: {span: 24},
                rules:formRule(), //表单验证规则
            };
        },
        methods: {
            boolen(d) {
                return !!d;
            }
            ,
            handlerCloseModal(e) {
                this.showSelector = false;
                if (e.render) {
                    this.form.thumbUrl = e.data.mediaUrl;
                    this.form.thumbMediaId = e.data.mediaId;
                }
            },
            customRequest(data) {
                this.upLoading = true;
                const formData = new FormData();
                formData.append('file', data.file);
                formData.append("mediaType", "image");
                addFileMaterial(formData).then((res) => {
                    this.$exMod.ajaxMessage(res);
                    this.upLoading = false;
                    if (res.code === 0) {
                        let data = res.data.result;
                        this.form.thumbUrl = data.mediaUrl;
                        this.form.thumbMediaId = data.mediaId;
                    }
                })
            },
            beforeUpload(file) {
                const allowTye = ['bmp', 'png', 'jpeg', 'jpg', 'gif'];
                const fileType = file.type.split("/");
                const checkType = allowTye.findIndex((value, index, arr) => {
                    return value === fileType[1]
                });
                if (checkType < 0) {
                    this.$notification['error']({
                        message: '图片素材添加失败',
                        description: '图片素材只允许上传bmp,png、jpeg、jpg、gif格式的图片'
                    });
                    return false;
                }
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isLt2M) {
                    this.$notification['error']({message: '图片素材添加失败', description: "图片素材的大小不能超过 2MB!"});
                    return false;
                }
                return true
            },
            uploadHandler(info) {
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
        },
        computed: {
            form() {
                return this.dataList[this.dataIndex];
            }
        }
    };
</script>
<style scoped>
    .sameHeight {
        height: 170px;
        overflow: hidden;
    }
    .ant-form-item {
        margin-bottom: 0 !important;
    }
    .PreviewImg {
        max-width: 100%;
        max-height: 150px;
        overflow: hidden;
    }
</style>
